<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
         <#include "../static/top.ftl" >

</head>
<body>
<!-- Page Wrapper -->
<!-- In the PHP version you can set the following options from inc/config file -->
<!--
    Available classes:

    'page-loading'      enables page preloader
-->
<div id="page-wrapper">
    <!-- Preloader -->
    <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
    <!-- Used only if page preloader is enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
    <div class="preloader themed-background">
        <h1 class="push-top-bottom text-light text-center"><strong>Pro</strong>UI</h1>
        <div class="inner">
            <h3 class="text-light visible-lt-ie10"><strong>Loading..</strong></h3>
            <div class="preloader-spinner hidden-lt-ie10"></div>
        </div>
    </div>

    <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animations">
               

                 <#include "../static/menu.ftl" >

        <!-- Main Container -->
        <div id="main-container">
                   
                    
                    
                    
                    <#include "../static/header.ftl" >

            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">


                <div class="content-header">
                    <h4 style="padding-left: 20px;  padding-right: 20px;">
                        Dashboard&nbsp;&nbsp;&nbsp;<#include "../static/search.ftl" ></h4>
                </div>

                <ul class="breadcrumb breadcrumb-top">
                    <li>Home</li>
                    <li><a href="#">Dashboard</a></li>
                </ul>


                <!-- END Dashboard Header -->


                <div class="row">
                    <div class="col-sm-12 col-lg-12">
                        <div class="row">
                            <div class="block">
                                <!-- Block Title -->

                                <ul class="nav nav-tabs" id="tab_nav">

                                <#--<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>-->

                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-3" id="areas_div">
                                <label for="">Areas</label>
                                <select class="selectpicker" id="areas_select" data-live-search="true">
                                </select>
                            </div>
                        </div>

                        <div class="row" id="tab_content">


                        </div>


                    </div>
                </div>

            </div>
            <!-- END Page Content -->

            <!-- Footer -->
                    <#include "../static/corp.ftl" >
            <!-- END Footer -->

            <!-- END Main Container -->
        </div>
        <!-- END Page Container -->
    </div>

    <a href="#" id="to-top"><i class="fa fa-angle-double-up"></i></a>

     
         <#include "../static/footer.ftl" >
    <script type="text/javascript" src="/res1/js/jquery.pulsate.min.js"></script>
    <script>
        var TAB_JSON;
        var AREA_ID = "110000";
        if (typeof (store.get("pre_area")) != "undefined") {
            AREA_ID = store.get("pre_area");
        }
        $(document).ready(function () {
            getAreas();
            $(".sidebar-nav a").each(function () {
                $(this).removeClass('active');
            });
            $('#menu2').addClass('active');

            getData(AREA_ID);

            //地区选项框改变事件
            $("#areas_select").change(function () {
                AREA_ID = $(this).val();
                store.set("pre_area", AREA_ID);
                getData(AREA_ID);
            });

            function getData(areaId) {
                initBlockUi();
                $.ajax({
                    type: "GET",
                    url: "/service/data/get_tab_detail/" + areaId,
                    success: function (res) {
                        unBlockUi();
                        if (res.code == "suc") {
                            var jsonData = res.data;
                            TAB_JSON = jsonData;
                            var tabLength = jsonData.length;
                            var tabHtml = "";
                            var tabContentHtml = "";

                            for (var i = 0; i < tabLength; i++) {
                                var idName = "#tab" + i;
                                if (i == 0) {
                                    tabHtml = tabHtml + "<li class='active'><a href='" + idName + "' data-target='"
                                            + idName + "' data-toggle='tab'>"
                                            + jsonData[i].tabName + "</a></li>";

                                    tabContentHtml = tabContentHtml + "<div class='tab-pane active' id='" + idName + "'>"
                                            + jsonData[i].tabName + "</div>";
                                } else {
                                    tabHtml = tabHtml + "<li><a href='" + idName + "' data-target='"
                                            + idName + "' data-toggle='tab'>"
                                            + jsonData[i].tabName + "</a></li>";
                                }
                            }

                            $("#tab_nav").html(tabHtml);
                            $("#tab_content").html(tabContentHtml);
                            var tabIndex = parseInt(store.get("pre_tab"));
                            if (isNaN(tabIndex)) {
                                tabIndex = 0;
                            }
                            if (typeof (store.get("pre_prop")) != "undefined") {
                                try {
                                    $('html, body').animate({
                                        scrollTop: $("#" + store.get("pre_prop")).offset()
                                    }, 200);
                                } catch (e) {
                                }
                            }

                            $("#tab_nav li:eq(" + tabIndex + ") a").tab('show');
                            generateDetail(tabIndex, TAB_JSON[tabIndex].tabName);
                            $("#tab_nav a").click(function (e) {
                                for (var i = 0; i < tabLength; i++) {
                                    if (this.text == TAB_JSON[i].tabName) {
                                        generateDetail(i, TAB_JSON[i].tabName);
                                    }
                                }
                            });
                        } else {
                            layer.msg('empty data')
                        }
                    }
                });
            }

            function getAreas() {
                $.ajax({
                    type: "GET",
                    url: "/service/data/getAreas",
                    async: false,
                    success: function (res) {
                        if (res.code == "suc") {
                            var html = "";
                            var data = res.data.nodes;
                            for (var i = 0; i < data.length; i++) {
                                html = html + "<option value='" + data[i].code + "' >"
                                        + data[i].cname + "</option>";
                            }

                            $("#areas_select").html(html);
                            $("#areas_select").selectpicker("val", AREA_ID);
                            document.getElementById('areas_select').style.width = (screen.width * 2 / 5) + 'px'
                        } else {
                            layer.msg('empty data')
                        }
                    }
                });
            }

            function generateDetail(index, tabName) {
                var monthLength = TAB_JSON[index].monthDataList.length;
                var monthJson = TAB_JSON[index].monthDataList;
                var monthDetail = "";
                var monthResult = "";

                var yearLength = TAB_JSON[index].yearDataList.length;
                var yearJson = TAB_JSON[index].yearDataList;
                var yearDetail = "";
                var yearResult = "";

                var quarterLength = TAB_JSON[index].quarterDataList.length;
                var quarterJson = TAB_JSON[index].quarterDataList;
                var quarterDetail = "";
                var quarterResult = "";

                var quarterAreaLength = TAB_JSON[index].quarterAreaDataList.length;
                var quarterAreaJson = TAB_JSON[index].quarterAreaDataList;
                var quarterAreaDetail = "";
                var quarterAreaResult = "";

                var yearAreaLength = TAB_JSON[index].yearAreaDataList.length;
                var yearAreaJson = TAB_JSON[index].yearAreaDataList;
                var yearAreaDetail = "";
                var yearAreaResult = "";

                $("#areas_div").hide();
                if (quarterAreaLength > 0 || yearAreaLength > 0) {
                    $("#areas_div").show();
                }

                for (var i = 0; i < monthLength; i++) {
                    var yya = "", yyaStyle = "";
                    if (monthJson[i].yya != null) {
                        yya = monthJson[i].yya;
                        if (yya < 0) {
                            yyaStyle = "color:#e31e1e";
                        } else if (yya > 0) {
                            yyaStyle = "color:#16c016"
                        }
                    }
                    var unit = "";
                    if (monthJson[i].unit != null) {
                        unit = monthJson[i].unit;
                    }
                    var en_name = "";
                    if (monthJson[i].en_name != null && monthJson[i].en_name != "") {
                        en_name = " (" + monthJson[i].en_name + ")";
                    }///data/month/detail/index/

                    var href_value = "get_month_trend";
                    monthDetail = monthDetail + "<tr id='p_" + monthJson[i].prop + "'>" +
                            "<td  style=' text-align:center; vertical-align: middle; ' >" +


                            "<a  href='#' "
                            + " style='color: black' " +
                            "onclick='rememberVal(" + index + ",\"" + monthJson[i].prop + "\",\"" + href_value + "\")'>" + monthJson[i].cn_name + en_name
                            + "-" + unit + isnew(monthJson[i].isnew) + "</a>" +

                            "</td>" +
                            "<td  style=' text-align:center;  vertical-align: middle;' >"
                            + (monthJson[i].ym + "").substring(0, 4) + "-" + (monthJson[i].ym + "").substring(4, 6) + "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >"
                            + fmoney(parseFloat(monthJson[i].data).toFixed(1)) + "</td>" +
                            "<td  style=' text-align:center;  vertical-align: middle;" + yyaStyle + "' >"
                            + parseFloat(yya).toFixed(1) + "</td>" +

                            "</tr>";
                }
                if (monthDetail != "") {
                    monthResult = "" +
                            "<div class='block'>" +
                            "<div class='block-title'>" +
                            "<h2><strong>Monthly</strong>  Index</h2>" +
                            "</div>" +

                            "<table class='table table-bordered table-advance table-hover'>" +
                            "<thead>" +
                            "<tr>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Index</font> </th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Latest Month</font></th>" +
                            "<th   style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Value</font></th>" +
                            "<th   style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'>IPP %</font></th>" +

                            "</tr>"
                            + "</thead>" +
                            "<tbody>" +
                            monthDetail +
                            "</tbody>" +
                            "</table>" +

                            "</div>";
                }

                for (var i = 0; i < quarterLength; i++) {
                    var yya = "", yyaStyle = "";
                    if (quarterJson[i].yya != null) {
                        yya = quarterJson[i].yya;
                        if (yya < 0) {
                            yyaStyle = "color:#e31e1e";
                        } else if (yya > 0) {
                            yyaStyle = "color:#16c016"
                        }
                    }
                    if (quarterJson[i].yya != null) {
                        yya = quarterJson[i].yya;
                    }
                    var unit = "";
                    if (quarterJson[i].unit != null) {
                        unit = quarterJson[i].unit;
                    }
                    var en_name = "";
                    if (quarterJson[i].en_name != null && quarterJson[i].en_name != "") {
                        en_name = " (" + quarterJson[i].en_name + ")";
                    }
                    var href_value = "get_quarter_trend";
                    quarterDetail = quarterDetail + "<tr id='p_" + quarterJson[i].prop + "'>" +
                            "<td    style=' text-align:center; vertical-align: middle;' >" +


                            "<a  href='#' "
                            + " style='color: black' " +
                            "onclick='rememberVal(" + index + ",\"" + quarterJson[i].prop + "\",\"" + href_value + "\")'>" + quarterJson[i].cn_name + en_name
                            + "-" + unit + isnew(quarterJson[i].isnew) + "</a>" +


                            "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >" + quarterJson[i].yq_name + "</td>" +
                            "<td  style=' text-align:center;vertical-align: middle; ' >"
                            + fmoney(parseFloat(quarterJson[i].data).toFixed(1)) + "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;" + yyaStyle + "' >"
                            + parseFloat(yya).toFixed(1) + "</td>" +

                            "</tr>";
                }
                if (quarterDetail != "") {
                    quarterResult = "" +


                            "<div class='block'>" +
                            "<div class='block-title'>" +
                            "<h2><strong>Quarterly</strong>  Index</h2>" +
                            "</div>" +

                            "<table class='table table-bordered table-advance table-hover'>" +
                            "<thead>" +
                            "<tr>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'>Index</font> </th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            " <font style='font-weight:bold;color:white;'> Latest Quarter</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' > " +
                            "<font style='font-weight:bold;color:white;'>Value</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'>IPP %</font></th>" +

                            "</tr>"
                            + "</thead>" +
                            "<tbody>" +
                            quarterDetail +
                            "</tbody>" +
                            "</table>" +
                            "</div>";
                }

                for (var i = 0; i < yearLength; i++) {
                    var yya = "", yyaStyle = "", yyaName = "IYA %";
                    if (yearJson[i].yya != null) {
                        yya = yearJson[i].yya;
                        if (yya < 0) {
                            yyaStyle = "color:#e31e1e";
                        } else if (yya > 0) {
                            yyaStyle = "color:#16c016"
                        }
                    }
                    if (tabName == "World GDP") {
                        if (yearJson[i].yya != null) {
                            yya = yearJson[i].abs;
                        }
                        yyaName = "Increase";
                    } else {
                        if (yearJson[i].yya != null) {
                            yya = yearJson[i].yya;
                        }
                    }

                    var unit = "";
                    if (yearJson[i].unit != null) {
                        unit = yearJson[i].unit;
                    }
                    var en_name = "";
                    if (yearJson[i].en_name != null && yearJson[i].en_name != "") {
                        en_name = " (" + yearJson[i].en_name + ")";
                    }
                    var href_value = "get_year_trend";
                    yearDetail = yearDetail + "<tr id='p_" + yearJson[i].prop + "'>" +
                            "<td    style=' text-align:center; vertical-align: middle;' >" +


                            "<a  href='#' "
                            + " style='color: black' " +
                            "onclick='rememberVal(" + index + ",\"" + yearJson[i].prop + "\",\"" + href_value + "\")'>" + yearJson[i].cn_name + en_name
                            + "-" + unit + isnew(yearJson[i].isnew) + "</a>" +


                            "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >" + yearJson[i].yy + "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >"
                            + fmoney(parseFloat(yearJson[i].data).toFixed(1)) + "</td>" +
                            "<td  style=' text-align:center;vertical-align: middle; " + yyaStyle + "'>"
                            + parseFloat(yya).toFixed(1) + "</td>" +

                            "</tr>";
                }
                if (yearDetail != "") {
                    yearResult = "" +

                            "<div class='block'>" +
                            "<div class='block-title'>" +
                            "<h2><strong>Yearly</strong>  Index</h2>" +
                            "</div>" +
                            "<table class='table table-bordered table-advance table-hover'>" +
                            "<thead>" +
                            "<tr>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'>Index</font> </th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Latest Year</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Value</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' > " +
                            "<font style='font-weight:bold;color:white;'>" + yyaName + "</font></th>" +

                            "</tr>"
                            + "</thead>" +
                            "<tbody>" +
                            yearDetail +
                            "</tbody>" +
                            "</table>" +

                            "</div>";
                }

                for (var i = 0; i < yearAreaLength; i++) {
                    var yya = "", yyaStyle = "";
                    if (yearAreaJson[i].yya != null) {
                        yya = yearAreaJson[i].yya;
                        if (yya < 0) {
                            yyaStyle = "color:#e31e1e";
                        } else if (yya > 0) {
                            yyaStyle = "color:#16c016"
                        }
                    }
                    if (yearAreaJson[i].yya != null) {
                        yya = yearAreaJson[i].yya;
                    }
                    var unit = "";
                    if (yearAreaJson[i].unit != null) {
                        unit = yearAreaJson[i].unit;
                    }
                    var en_name = "";
                    if (yearAreaJson[i].en_name != null && yearAreaJson[i].en_name != "") {
                        en_name = " (" + yearAreaJson[i].en_name + ")";
                    }
                    var href_value = "get_year_area_trend";
                    yearAreaDetail = yearAreaDetail + "<tr id='p_" + yearAreaJson[i].prop + "'>" +
                            "<td    style=' text-align:center; vertical-align: middle;' >" +


                            "<a  href='#' "
                            + "style='color: black' " +
                            "onclick='rememberVal(" + index + ",\"" + yearAreaJson[i].prop + "\",\"" + href_value + "\")'>"
                            + yearAreaJson[i].cn_name + en_name
                            + "-" + unit + isnew(yearAreaJson[i].isnew) + "</a>" +


                            "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >" + yearAreaJson[i].yy + "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >"
                            + fmoney(parseFloat(yearAreaJson[i].data).toFixed(1)) + "</td>" +
                            "<td  style=' text-align:center;vertical-align: middle; " + yyaStyle + "'>"
                            + parseFloat(yya).toFixed(1) + "</td>" +

                            "</tr>";
                }
                if (yearAreaDetail != "") {
                    yearAreaResult = "" +

                            "<div class='block'>" +
                            "<div class='block-title'>" +
                            "<h2><strong>Yearly Area</strong>  Index</h2>" +
                            "</div>" +
                            "<table class='table table-bordered table-advance table-hover'>" +
                            "<thead>" +
                            "<tr>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'>Index</font> </th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Latest Year</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Value</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' > " +
                            "<font style='font-weight:bold;color:white;'>IYA %</font></th>" +

                            "</tr>"
                            + "</thead>" +
                            "<tbody>" +
                            yearAreaDetail +
                            "</tbody>" +
                            "</table>" +

                            "</div>";
                }

                for (var i = 0; i < quarterAreaLength; i++) {
                    var yya = "", yyaStyle = "";
                    if (quarterAreaJson[i].yya != null) {
                        yya = quarterAreaJson[i].yya;
                        if (yya < 0) {
                            yyaStyle = "color:#e31e1e";
                        } else if (yya > 0) {
                            yyaStyle = "color:#16c016"
                        }
                    }
                    if (quarterAreaJson[i].yya != null) {
                        yya = quarterAreaJson[i].yya;
                    }
                    var unit = "";
                    if (quarterAreaJson[i].unit != null) {
                        unit = quarterAreaJson[i].unit;
                    }
                    var en_name = "";
                    if (quarterAreaJson[i].en_name != null && quarterAreaJson[i].en_name != "") {
                        en_name = " (" + quarterAreaJson[i].en_name + ")";
                    }
                    //var href_value = "/analytics/data?key=/service/data/get_quarter_area_trend/" + quarterAreaJson[i].prop;
                    var href_value = "get_quarter_area_trend";

                    quarterAreaDetail = quarterAreaDetail + "<tr id='p_" + quarterAreaJson[i].prop + "'>" +
                            "<td    style=' text-align:center; vertical-align: middle;' >" +


                            "<a href='#' "
                            + " style='color: black' " +
                            "onclick='rememberVal(" + index + ",\"" + quarterAreaJson[i].prop + "\",\"" + href_value + "\")'>"
                            + quarterAreaJson[i].cn_name + en_name
                            + "-" + unit + isnew(quarterAreaJson[i].isnew) + "</a>" +


                            "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >" + quarterAreaJson[i].yq_name + "</td>" +
                            "<td  style=' text-align:center; vertical-align: middle;' >"
                            + fmoney(parseFloat(quarterAreaJson[i].data).toFixed(1)) + "</td>" +
                            "<td  style=' text-align:center;vertical-align: middle; " + yyaStyle + "'>"
                            + parseFloat(yya).toFixed(1) + "</td>" +

                            "</tr>";
                }
                if (quarterAreaDetail != "") {
                    quarterAreaResult = "" +

                            "<div class='block'>" +
                            "<div class='block-title'>" +
                            "<h2><strong>Quarterly Area</strong>  Index</h2>" +
                            "</div>" +
                            "<table class='table table-bordered table-advance table-hover'>" +
                            "<thead>" +
                            "<tr>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'>Index</font> </th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Latest Quarter</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' >" +
                            "<font style='font-weight:bold;color:white;'> Value</font></th>" +
                            "<th  style=' text-align:center; background-color: #82AFB7' > " +
                            "<font style='font-weight:bold;color:white;'>IPP %</font></th>" +

                            "</tr>"
                            + "</thead>" +
                            "<tbody>" +
                            quarterAreaDetail +
                            "</tbody>" +
                            "</table>" +

                            "</div>";
                }

                store.set("pre_tab", index);
                if (tabName == "World GDP") {
                    if (monthResult != "") {
                        store.set("pre_prop", "p_" + monthJson[0].prop);
                    } else if (yearResult != "") {
                        store.set("pre_prop", "p_" + yearJson[0].prop);
                    } else if (quarterResult != "") {
                        store.set("pre_prop", "p_" + quarterJson[0].prop);
                    } else if (yearAreaResult != "") {
                        store.set("pre_prop", "p_" + yearAreaJson[0].prop);
                    } else if (quarterAreaResult != "") {
                        store.set("pre_prop", "p_" + quarterAreaJson[0].prop);
                    }
                    $("#tab_content").html(monthResult + yearResult + quarterResult + yearAreaResult + quarterAreaResult);
                } else {
                    if (monthResult != "") {
                        store.set("pre_prop", "p_" + monthJson[0].prop);
                    } else if (quarterResult != "") {
                        store.set("pre_prop", "p_" + quarterJson[0].prop);
                    } else if (yearResult != "") {
                        store.set("pre_prop", "p_" + yearJson[0].prop);
                    } else if (quarterAreaResult != "") {
                        store.set("pre_prop", "p_" + quarterAreaJson[0].prop);
                    } else if (yearAreaResult != "") {
                        store.set("pre_prop", "p_" + yearAreaJson[0].prop);
                    }
                    $("#tab_content").html(monthResult + quarterResult + yearResult + quarterAreaResult + yearAreaResult);
                }
            }
        });

        function isnew(isnew) {
            if (isnew == '1') {
                return '<span class="badge badge-info">New</span>';
            } else {
                return "";
            }
        }

        function rememberVal(index, prop, hrefValue) {
            store.set("pre_tab", index);
            store.set("pre_prop", "p_" + prop);
            if (hrefValue.indexOf("area") > 0) {
                window.location.href = "/analytics/data?key=/service/data/" + hrefValue + "/" + prop + "/" + AREA_ID;
            } else {
                window.location.href = "/analytics/data?key=/service/data/" + hrefValue + "/" + prop;
            }
        }

    </script>
</body>
</html>